<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" />
    <script src="https://cdn.bootcss.com/qs/6.6.0/qs.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" />
    <style>
        .cube-btn {
            margin: 10px 0;
        }
    </style>
</head>

<body>
    <div id="app">
        <div><a href="/swagger-ui.html">SwaggerUI</a></div>
        <div><span href="">TODO: EasyMock配合</span></div>
        <div>
            <el-button @click="addUser">创建用户</el-button>
            <el-button @click="pageUser">用户列表</el-button>
            <el-button @click="delUser">删除用户</el-button>
        </div>
        <div>
            <el-button @click="login">登入</el-button>
            <el-button @click="logout">退出登录</el-button>
        </div>
        <div>
            <el-button onclick="document.getElementById('log').innerHTML = ''">Clear Log</el-button>
        </div>
        <h6 id="log"></h6>
    </div>
    <script>
        const tokenKey = 'egg-cms-demo-token';
        const resDataName = 'result';
        // axios.defaults.baseURL = 'http://localhost:3000'
        axios.defaults.withCredentials = true
        axios.interceptors.request.use(
            config => {
                const token = window.localStorage.getItem(tokenKey);
                if (token) {
                    // 判断是否存在token，如果存在的话，则每个http header都加上token
                    // Bearer是JWT的认证头部信息
                    config.headers.common["Authorization"] = "Bearer " + token;
                }
                return config;
            },
            err => {
                return Promise.reject(err);
            }
        )
        axios.interceptors.response.use(
            response => {
                document.getElementById('log').append(JSON.stringify(response.data))
                return response;
            }
        );
        var app = new Vue({
            el: '#app',
            data: {
                value: 'input',
                token: {}
            },
            methods: {
                async addUser() {
                    await axios.post('/api/user/add', {
                        username: 'cmsAdmin',
                        password: 'Aa111111',
                        email: '12345@163.com',
                    })
                },
                async pageUser() {
                    const res = await axios.post('/api/user/page')
                    this.list = res.data[resDataName].list
                },
                // 为了演示，这个删除做得不完整的：(麻烦先赋值给this.list)
                async delUser() {
                    this.list.forEach(item => {
                        axios.post('/api/user/del', {
                            id: item.id
                        })
                    })
                },
                async login() {
                    const res = await axios.post('/auth/login', {
                        username: 'cmsAdmin',
                        password: 'Aa111111'
                    })
                    localStorage.setItem(tokenKey, res.data[resDataName].token);
                },
                async logout() {
                    const res = await axios.post('/auth/logout')
                    localStorage.removeItem(tokenKey);
                },
            },
            mounted: function () {},
        });
    </script>
</body>

</html>